草庐IT

HTML & CSS 设计原则

全部标签

javascript - 如何让导入的 css 字体/图标对 shadow dom 中的元素产生影响?

假设我想使用shadowdom创建一个自定义元素。模板中的某些元素具有在链接的css文件中指定的类名。现在我想让css规则对元素产生影响。但由于shadowdom样式边界,我无法实现。DreamLineTourBlogContactErrorSearchvarimportDoc=document.currentScript.ownerDocument;varproto=Object.create(HTMLElement.prototype,{createdCallback:{value:function(){vart=importDoc.querySelector("#blog-hea

Javascript HTML 5 进度条不适用于 setInterval

单击按钮时进度条增加1。但我没有看到它增加到100。我必须一次又一次地单击按钮来增加值。你能告诉我我可能做错了什么吗?此外,如何在不使用进度条ID的情况下清除每个进度条达到100时的间隔?window.onload=function(){console.log("Hello");varbutton=document.getElementById("animateButton");button.onclick=goProgress;}functiongoProgress(){ console.log("IngoProgress()");varprogressBars=document.g

javascript - webpack css loader 不工作 : no output css file

我正在从事开源元素,现在我需要为前端设置webpack。我在下面尝试了webpack配置,JS工作正常,但css不行,没有css输出文件。我不知道为什么会这样,请帮助我。下面是我的webpack配置js文件:constpath=require("path");constwebpack=require('webpack');constExtractTextPlugin=require("extract-text-webpack-plugin");constnode_dir=__dirname+'/node_modules';constsassLoaders=['css-loader','

javascript - 使用 Kurento 媒体服务器在 Chrome 中获取 "ScreenCaptureError"

我正在尝试与KurentoWebRtc服务器共享我的屏幕。但是得到这个错误:NavigatorUserMediaError{name:"ScreenCaptureError",message:"",constraintName:""}同样的代码在Firefox中没有错误。用于webrtc的约束:varconstraints={audio:true,video:{mandatory:{chromeMediaSource:'screen',maxWidth:1920,maxHeight:1080,maxFrameRate:30,minFrameRate:15,minAspectRatio:

javascript - Vanilla JavaScript : Is there a way to toggle multiple CSS-classes in one statement?

我使用这些JavaScript代码来更改脚本中的类:vartoggleDirection=function(){group.classList.toggle('left-to-right');group.classList.toggle('right-to-left');}在我的示例中,只有两个类需要更改,但也可以是多个类...因此:有谁知道编写示例的方法不那么冗余? 最佳答案 不,不可能直接使用Element.classListAPI。查看API,您可以阅读:toggle(String[,force])Whenonlyonearg

javascript - 如何在 HTML 中指定 Javascript 的版本

随着新的JavaScriptES6的发布。我想知道如何指定版本。假设,如果我想使用HTML5,我在html页面的顶部声明同样,如果我想使用jQuery,那么我会使用jQuery2.1.4或任何我使用的src指向下面的urlhttps://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js我们在html中是这样写js的。//js或如何指定脚本应使用ES6版本,以防浏览器不支持,回退到ES5。 最佳答案 正如其他人所说:浏览器将使用它内置的任何JavaScript引擎……无

javascript - "right"同步HTTP请求方式

你可能是来这里责备我的,但这是一个真实的用例。在在线教育的世界里,有SCORM类(class)。我必须让旧的SCORM类(class)在网站上运行。SCORM类(class)是“基于网络的”并在浏览器中运行,但他们希望在iframe中运行,并且希望家长提供GetValue方法和SetValue。因此,这些SCORM类(class)正在执行类似parent.SetValue("score","90")的操作并继续进行。如果有任何问题,该函数应该返回“false”。SCORM来自90年代,在现代网络中我们知道我们必须进行回调/promise,并且http“经常”失败。您可能认为解决方案是一

javascript - IE11 上的 "Error: Invalid argument."

我在IE11上的Angular1.5.7中收到下面列出的错误。Angular不会在Chrome上抛出任何错误。我尝试了以下方法:我看到帖子暗示这与内插值有关,例如“{{model.label}}”,所以我添加了一个ng-if,但它没有帮助。已升级到最新的Angular:1.5.7。升级了jquery,因为我看到错误堆栈中列出了它。Error:Invalidargument.atinterpolateFnWatchAction(http://localhost:8080/mdp-js/app/assets/angular/angular.js:9621:17)atinterpolateF

javascript - 如何使用 Javascript 判断 "navbar-toggle"按钮是否折叠或隐藏

有没有办法用JS找出切换按钮菜单是折叠还是隐藏。class="navbar-toggle"或data-toggle="collapse"是否有指示此状态的参数?我知道显示或隐藏“.collape”时调用的事件:$('.navbar-collapse').on('shown.bs.collapse',function(){//显示下拉菜单时调用});此外,我知道显示或隐藏崩溃的方法是这样的:$('.navbar-collapse').collapse('hide');但我找不到任何关于如何获取.collapse的当前状态的信息,告诉我它是隐藏还是显示。 最佳答

javascript - Redux normalizr + 处理减少的响应

Normalizr非常擅长创建实体的结构化JSON存储库。我们有很多案例显示数据列表,例如posts已规范化。在列出posts的地方,API响应仅限于几个关键字段。尽管我们现在需要从API中获取包含所有字段的完整JSON实体,但我们也有显示这些posts之一的情况。如何最好地处理这个问题?一个一个单独的reducer、thunk/saga、选择器和Action?B只需将从API获取的post的扩展版本插入到reducer中。重用之前的选择器等? 最佳答案 将应用程序的状态视为数据库。我建议你使用这个状态形状:{entities:{/